<template>
  <div class="channel-main">
    <div class="channel-title">
      <div class="title">航标概况</div>
      <div class="time">
        <img src="../../static/images/icon-time.png" alt="" />
        <span>{{ currentYearMonth1 }}-{{ currentYearMonth2 }}</span>
      </div>
    </div>
    <div class="unit">单位:座</div>
    <div class="item-list">
      <div class="item">
        <div style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          ">
          <div class="item-title">全省航标概览</div>
          <div class="icon">
            <img src="../../static/images/Subtract.png" alt="" @click="handleShow('first')" />
          </div>
        </div>
        <div class="line"></div>
        <div class="amount">
          <div class="info">
            <img src="../../static/images/navigation-bg-icon.png" alt="">
            <div class="detail">
              <div class="name">航标总数</div>
              <div class="value">{{ optionData.beaconSum }}</div>
            </div>
          </div>
        </div>
        <div class="amount-content">
          <div class="amount-item">
            <div class="name">内河航标总数</div>
            <div class="num">{{ optionData.nhBeaconSum }}</div>
          </div>
          <div class="line-box"></div>
          <div class="amount-item">
            <div class="name">沿海航标总数</div>
            <div class="num">{{ optionData.yhBeaconSum }}</div>
          </div>
        </div>
      </div>
      <!-- <div class="item">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="item-title" style="border-bottom: none">
            航道部门管辖航标概览
          </div>
          <div class="icon">
            <img src="../../static/images/Subtract.png" alt="" @click="handleShow('second')" />
          </div>
        </div>
        <div class="line"></div>
        <div class="item-two-content">
          <div
            class="tab"
            :class="curActive === 1 ? 'active' : ''"
            @click="getActive(1)"
          >
            航标（座）
          </div>
          <div
            class="tab"
            :class="curActive === 2 ? 'active' : ''"
            @click="getActive(2)"
          >
            航标灯（盏）
          </div>
        </div>
        <div class="content" v-show="curActive === 1">
          <div class="content-top">
            <div class="name">
              <img src="../../static/images/navigation-two.png" alt="" />              
              <div>航标总数</div>
            </div>
            <div class="num">{{ optionData.departmentBeaconSum }}</div>
          </div>
          <div class="content-bottom">
            <div class="name">发光航标</div>
            <div class="num">{{ optionData.departmentLuminousBeaconSum }}</div>
          </div>
        </div>
        <div class="content" v-show="curActive === 2">
          <div class="content-top">
            <div class="name">
              <img src="../../static/images/navigation-four.png" alt="" />
              <div>航标灯总数</div>
            </div>
            <div class="num">{{ optionData.departmentBeaconLightSum }}</div>
          </div>
          <div class="content-bottom">
            <div class="name">发光航标灯</div>
            <div class="num">{{ optionData.departmentBeaconLightingSum }}</div>
          </div>
        </div>
      </div> -->
      <div class="item">
        <div style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          ">
          <div class="item-title" style="border-bottom: none">
            遥测遥控航标概览
          </div>
          <div class="icon">
            <img src="../../static/images/Subtract.png" alt="" @click="handleShow('third')" />
          </div>
        </div>
        <div class="line"></div>
        <!-- <div class="item-two-content">
          <div
            class="tab"
            :class="controlCurActive === 1 ? 'active' : ''"
            @click="getControlActive(1)"
          >
            航标（座）
          </div>
          <div
            class="tab"
            :class="controlCurActive === 2 ? 'active' : ''"
            @click="getControlActive(2)"
          >
            航标灯（盏）
          </div>
        </div> -->
        <div class="content" v-show="controlCurActive === 1">
          <div class="content-top">
            <div class="name">
              <img src="../../static/images/navigation-three.png" alt="" />
              <div>遥测遥控航标总数</div>
            </div>
            <div class="num">{{ optionData.departmentRtuBeaconSum }}</div>
          </div>
          <div class="content-bottom">
            <div class="name">内河遥测遥控航标总数</div>
            <div class="num">
              {{ optionData.departmentInlandRiverRtuBeaconSum }}
            </div>
          </div>
          <div class="content-bottom" style="margin-top: 16px">
            <div class="name">沿海遥测遥控航标总数</div>
            <div class="num">
              {{ optionData.departmentCoastalAreaRtuBeaconSum }}
            </div>
          </div>
        </div>
        <div class="content" v-show="controlCurActive === 2">
          <div class="content-top">
            <div class="name">
              <img src="../../static/images/navigation-five.png" alt="" />
              <div>遥测遥控航标灯总数</div>
            </div>
            <div class="num">{{ optionData.departmentRtuBeaconLightSum }}</div>
          </div>
          <div class="content-bottom">
            <div class="name">内河航标灯遥测遥控终端总数</div>
            <div class="num">
              {{ optionData.departmentInlandRiverRtuBeaconLightSum }}
            </div>
          </div>
          <div class="content-bottom" style="margin-top: 16px">
            <div class="name">沿海航标灯遥测遥控终端总数</div>
            <div class="num">
              {{ optionData.departmentCoastalAreaRtuBeaconLightSum }}
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          ">
          <div class="item-title">遥测遥控航标分布详情</div>
          <div class="icon">
            <img src="../../static/images/Subtract.png" alt="" @click="handleShow('')" />
          </div>
        </div>

        <div class="line"></div>

        <div class="chart-title">
          各区域中心管辖遥测遥控航标分布图
        </div>
        <div class="chart" id="bar-chart"></div>
        <div class="chart-title">各区域中心管辖遥测遥控航标详情</div>
        <div class="table" style="margin-top: 20px">
          <table style="border-collapse: collapse" cellspacing="0" cellpadding="0">
            <thead>
              <tr>
                <th style="width: 150px">区域中心</th>
                <th style="width: 160px">遥测遥控航标数</th>
              </tr>
            </thead>
          </table>
          <div class="tbody">
            <table style="border-collapse: collapse" cellspacing="0" cellpadding="0">
              <tbody>
                <tr v-for="item in tableList" :key="item.region">
                  <td style="width: 150px">
                    <strong>{{ item.region }}</strong>
                  </td>
                  <td style="width: 160px">
                    {{ item.rtuBeacon }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <!-- <div class="item">
        <div class="item-title">基础数据</div>
        <div class="line"></div>
        <div class="chart-title">航标基础信息分析</div>
        <div class="staticTable">          
          <table cellspacing="0" border="0" cellpadding="0">
            <thead>
              <tr>
                <th>航标编号</th>
                <th>航标类型</th>
                <th>所在航道</th>
                <th>状态类型</th>
                <th>航标位置</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in pharosBaseData" :key="index">
                <td>{{ item.hbbm }}</td>
                <td>{{ item.hblx }}</td>
                <td>{{ item.hdmc }}</td>
                <td>{{ item.alarm }}</td>
                <td>{{ item.hbwz }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div> -->
    </div>
    <div class="source">
      <div class="name">广东省交通运输厅</div>
      <div class="name">数据来源：广东省航道事务中心</div>
    </div>
    <!-- 弹窗 -->
    <van-dialog v-model:show="isShow" confirm-button-text="我知道了" confirm-button-color="#2D78ED">
      <div v-for="(item,index) in dialogContent" :key="index">
        <div class="dialog-title">{{ item.title }}</div>
        <div class="dialog-content">{{ item.content }}</div>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";

// 引入api
import {
  beaconSituationDetail, //航标概况（静态数据）
  rtuBeaconChart, //遥测遥控航标分布详情
  pharosBase, //航标基础数据
} from "../../utils/apis";

import * as echarts from "echarts/core";
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  DataZoomComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  BarChart,
  CanvasRenderer,
  DataZoomComponent,
]);

const optionData = reactive({
  beaconSum: "", //全省航标总数
  departmentBeaconSum: "", //航道部门管辖航标座数
  departmentLuminousBeaconSum: "", //航道部门管辖发光航标座数
  departmentBeaconLightSum: "", //航道部门管辖航标灯盏数
  departmentBeaconLightingSum: "", //航道部门管辖发光航标灯盏数
  departmentRtuBeaconSum: "", //航道部门管辖遥测遥控航标座数
  departmentInlandRiverRtuBeaconSum: "", //航道部门管辖内河遥测遥控航标座数
  departmentCoastalAreaRtuBeaconSum: "", //航道部门管辖沿海遥测遥控航标座数
  departmentRtuBeaconLightSum: "", //航道部门管辖遥测遥控航标灯盏数
  departmentInlandRiverRtuBeaconLightSum: "", //航道部门管辖内河遥测遥控航标灯盏数
  departmentCoastalAreaRtuBeaconLightSum: "", //航道部门管辖沿海遥测遥控航标灯盏数  
  nhBeaconSum: "", //内河航标总数
  yhBeaconSum: "", //沿海航标总数
});

const beaconSituationDetailFn = () => {
  beaconSituationDetail().then((res) => {    
    if(res.code === 200 && res.data.length){
      optionData.beaconSum = res.data[0].beaconSum;
      optionData.departmentBeaconSum = res.data[0].departmentBeaconSum;
      optionData.departmentLuminousBeaconSum = res.data[0].departmentLuminousBeaconSum;
      optionData.departmentBeaconLightSum = res.data[0].departmentBeaconLightSum;
      optionData.departmentBeaconLightingSum = res.data[0].departmentBeaconLightingSum;
      optionData.departmentRtuBeaconSum = res.data[0].departmentRtuBeaconSum;
      optionData.departmentInlandRiverRtuBeaconSum = res.data[0].departmentInlandRiverRtuBeaconSum;
      optionData.departmentCoastalAreaRtuBeaconSum = res.data[0].departmentCoastalAreaRtuBeaconSum;
      optionData.departmentRtuBeaconLightSum = res.data[0].departmentRtuBeaconLightSum;
      optionData.departmentInlandRiverRtuBeaconLightSum = res.data[0].departmentInlandRiverRtuBeaconLightSum;
      optionData.departmentCoastalAreaRtuBeaconLightSum = res.data[0].departmentCoastalAreaRtuBeaconLightSum;
      optionData.nhBeaconSum = res.data[0].nhBeaconSum;
      optionData.yhBeaconSum = res.data[0].yhBeaconSum;
    }
  });
};

const tableList = ref([]);
const xAxisData = ref([]);
const seriesData = ref([]);
const rtuBeaconChartFn = () => {
  rtuBeaconChart().then((res) => {
    if(res.code === 200 && res.data.length){
      tableList.value = res.data;
      res.data.forEach((item) => {
        xAxisData.value.push(item.region);
        seriesData.value.push(item.rtuBeacon);
      });
      initBarChart();
    }
  });
};

const initBarChart = () => {
  let barChart = echarts.getInstanceByDom(document.getElementById("bar-chart"));
  if (barChart == null) {
    barChart = echarts.init(document.getElementById("bar-chart"));
  }
  let option;
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      confine: true, //限制在图表区域内
      formatter: function(params) {
        return params[0].name + '<br/>' + params[0].marker + params[0].seriesName + '  ' + params[0].value;
      }
    },
    legend: {
      textStyle: {
        fontSize: 12,
      },
      itemGap: 4,
      icon: 'circle',
      itemWidth: 6,
      itemHeight: 6,
      left:'30px'
    },
    grid: {
      top: "25%",
      left: "5%",
      right: "60",
      bottom: "5%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        // maxValueSpan: 8,
        startValue: 0,
        endValue: 7,
        zoomLock: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        data: xAxisData.value,
        name: "区域中心",
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "10px",
          color: "rgba(0,0,0,0.45)",         
        },
        axisLabel:{
          interval: 0,
          formatter: function (value) {
            //x轴的文字改为竖版显示
            var str = value.split("");
            return str.join("\n");
          }
        },

      },  
    ],
    yAxis: [
      {
        type: "value",
        name: '座数', 
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "10px",
          color: "rgba(0,0,0,0.45)",
          padding: [0,30,0,0]
        },
        nameGap: 15,       
      },
    ],
    series: [
      {
        name: "遥测遥控航标数",
        data: seriesData.value,
        type: "bar",
        barWidth: 10,
        label: {
          show: true,
          position: "top",
        },
        itemStyle: {
          color: '#6B9BFD'
        },
      },
    ],
  };

  option && barChart.setOption(option);
};

// 航标
const curActive = ref(1);
const getActive = (val) => {
  curActive.value = val;
};
// 遥控航标
const controlCurActive = ref(1);
const getControlActive = (val) => {
  controlCurActive.value = val;
};

// 弹窗
const isShow = ref(false);
const dialogContent = ref([]);
const handleShow = (val) => {
  //隐藏echarts tooltip
  let barChart = echarts.getInstanceByDom(document.getElementById("bar-chart"));
  barChart.dispatchAction({
    type: 'hideTip'
  });
  if(val === "first"){
    dialogContent.value = [
      {
        title: "航标总数（座）",
        content: "航道部门管辖内河航道航标18030座及全省沿海航道航标2133座之和（包含广州港出海航道）"
      }
    ];
  }else if(val === "second"){
    dialogContent.value = [
      {
        title: "航标总数（航道部门管辖）（座/盏）",
        content: "航道部门管辖的且已经接入智慧航道系统的航标总数以及对应的航标灯总盏数"
      },
      {
        title: "发光航标总数（座/盏）",
        content: "航道部门管辖发光航标总座数及对应航标灯总盏数"
      }
    ];
  }else if(val === "third"){
    dialogContent.value = [
      {
        title: "内河航标遥测遥控终端总数",
        content: "航道部门管辖内河航标遥测遥控终端的总个数"
      },
      {
        title: "沿海航标遥测遥控终端总数",
        content: "航道部门管辖沿海航标遥测遥控终端的总个数"
      }
    ];
  }else{
    dialogContent.value = [
      {
        title: "航标遥测遥控终端总数",
        content: "航道部门管辖航标遥测遥控终端的总个数（实现按区域中心进行展示）"
      },
    ];
  }
  isShow.value = true;
};

//获取日期
const currentYearMonth1 = ref("");
const currentYearMonth2 = ref("");

//航标基础数据
const pharosBaseData = ref([]);
const pharosBaseFn = () => {
  pharosBase().then((res) => {
    if(res.code === 200 && res.data.length){
      pharosBaseData.value = res.data;
    }
  });
};

onMounted(() => {
  if(sessionStorage.getItem("watermarkTxt")){
    //加水印
    watermark.init({ 
      watermark_x: -30, // 水印起始位置x轴坐标
      watermark_y: -20, // 水印起始位置Y轴坐标
      watermark_x_space: 20, // 水印x轴间隔
      watermark_y_space: 80, // 水印y轴间隔
      watermark_alpha: 0.07, // 水印透明度
      watermark_fontsize: '14px', // 水印字体大小
      watermark_width: 100, // 水印宽度
      watermark_height: 30,
      watermark_txt: sessionStorage.getItem("watermarkTxt"), // 水印的内容
      watermark_angle: 25, // 水印倾斜度数
      watermark_rows: 0, // 水印行数
      watermark_cols: 0, // 水印列数
      watermark_font: '微软雅黑', // 水印字体
      watermark_color: 'black', // 水印字体颜色 
    });
  }
  
  currentYearMonth1.value = new Date().getFullYear() + ".01";
  currentYearMonth2.value = new Date().format("yyyy.MM");
  
  beaconSituationDetailFn();
  rtuBeaconChartFn();
  // pharosBaseFn();
});
</script>

<style lang='scss' scoped>
.channel-main {
  overflow-x: hidden;
  background: #f1f1f1;
  padding: 0 0 1px 0;  
  .channel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 10px 20px;
    background-color: #fff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
    .title {
      font-size: 18px;
      font-weight: 500;
      color: #262626;
      position: relative;
    }
    .time {
      display: flex;
      align-items: center;
      color: #8c8c8c;
      font-size: 14px;
      font-weight: 500;
      img {
        width: 18px;
        height: 18px;
        padding-right: 5px;
      }
    }
  }
  .unit {
    display: flex;
    flex-direction: row-reverse;
    padding: 8px 20px 8px 0;
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
  }
  .item-list {
    padding-left: 20px;
    padding-right: 20px;
    .item {
      background: #ffffff;
      box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      opacity: 1;
      margin-bottom: 16px;
      .icon {
        width: 16px;
        height: 16px;
        margin-right: 16px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item-title {
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        padding: 16px 0 16px 16px;
        position: relative;
      }
      .line {
        height: 1px;
        background: #d9d9d9;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-left: 16px;
        margin-right: 16px;
      }
      .amount {
        display: flex;        
        .info{
          width: 100%;
          height: 80px;
          background-image: url(../../static/images/navigation-bg.png);
          background-repeat: no-repeat;
          background-size: 100% 80px;
          display: flex;
          align-items: center;
          margin: 16px;
          img{
            width: 42px;
            height: 42px;
            margin: 0 16px;
          }
          .detail{
            display: flex;
            flex-direction: column;
            .name{
              font-size: 14px;
              color: #595959;
            }
            .value{
              font-size: 24px;
              font-weight: 800;
              color: #0473DE;
            }
          }
        }
      }
      .amount-content{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        .amount-item{
          margin-bottom: 16px;
          .name{
            font-size: 14px;
            font-weight: 500;
            color: #644343;
          }
          .num{
            font-size: 21px;
            font-weight: 500;
            color: #595959;
            margin-top: 8px;
            text-align: center;
          }
        }
        .line-box{
          border-left: 1px solid #D9D9D9;
          width: 1px;
          height: 45px;
        }       
      }
      .item-two-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 36px;
        color: #595959;
        font-size: 16px;
        font-weight: bold;
        .tab {
          padding: 8px 0;
        }
        .active {
          color: #2d78ed;
          border-bottom: 4px solid #2d78ed;
          // padding: 8px 0;
        }
      }
      .content {
        padding: 16px 0;
        .content-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: 500;
          font-size: 16px;
          color: #74767c;
          padding-bottom: 16px;
          margin: 12px 16px 16px 16px;
          border-bottom: 1px solid #d9d9d9;
          .name {
            display: flex;
            align-items: center;
            img {
              width: 18px;
              height: 18px;
              padding-right: 5px;
            }
          }
          .num {
            font-size: 21px;
            font-weight: bold;
          }
        }
        .content-bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background-color: #dfebfc;
          border-radius: 8px;
          padding: 16px;
          margin: 0 16px;
          color: #595959;
          font-size: 14px;
        }
      }
      .chart-title {
        font-size: 14px;
        font-weight: 500;
        color: #262626;
        position: relative;
        padding: 10px 0px 0px 24px;
      }
      .chart-title::before {
        content: "";
        background-color: #2d78ed;
        position: absolute;
        top: 70%;
        left: 4%;
        height: 14px;
        width: 2px;
        transform: translateY(-50%);
      }
      .chart {
        height: 240px;
        margin: 10px 0;
      }
      .table {
        margin: 16px;
        overflow: hidden;
        padding-bottom: 10px;
        #lineTd {
          position: relative;
        }
        #lineTd::after {
          content: "";
          position: absolute;
          left: 50%;
          bottom: 16px;
          border-top: 1px solid #d9d9d9;
          // border: 1px solid black;
          width: 100px;
          transform: translateX(-50%) rotate(-160deg);
        }
        th {
          padding: 4px;
          border: 1px solid #d9d9d9;
          font-size: 16px;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.85);
          background-color: #f8f9fb;
        }
        .tbody {
          height: 100px; /* 设置表格体容器的高度 */
          overflow-y: auto; /* 启用垂直滚动条 */
          // width: calc(110% - 22px);
          scrollbar-width: none;
          scrollbar-color: transparent;
          -ms-overflow-style: none;
        }
          .tbody::-webkit-scrollbar {
          width: 0;
          height: 0;
          background-color: transparent;
        }
          .tbody::-webkit-scrollbar-thumb {
          background-color: transparent;
        }
        .tbody {
          th,
          td {
            padding: 4px;
            border: 1px solid #d9d9d9;
            font-size: 14px;
            font-weight: 400;
            color: #595959;
            text-align: center;
          }
        }
        table {
          border-collapse: collapse;
        }
      }
      .staticTable{
        overflow: auto;
        height: 200px;
        border: 1px solid #d9d9d9;
        border-bottom: 0;
        border-right: 0;
        margin: 10px;
        table {
          border-collapse: separate;
          table-layout: fixed;
          width: 100%;
          color: #595959;
        }
        td, th {
          border-right: 1px solid #d9d9d9;
          border-bottom: 1px solid #d9d9d9;
          box-sizing: border-box;
          width: 100px;
          height: 20px;
          text-align: center;
        }
        th {
          background-color: #f8f9fb;
        }
        /* 控制表头固定的核心代码 */
        thead tr th {
          position: sticky;
          top: 0; /* 第一列最上 */
        }
        th:nth-child(1),
        th:nth-child(2){
          z-index: 2;
          background-color: #f8f9fb;
        }
      }
    }
  }
  .source{
    text-align: center;
    padding: 5px 0;
    color: #8C8C8C;
    .name{
      margin-bottom: 5px;
    }
  }
  .dialog-title{
    text-align: center;
    padding: 20px 0;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
  }
  .dialog-content{
    text-align: center;
    padding: 0 20px 20px 20px;
    font-size: 14px;
    font-weight: 400;
  }
  :deep(.van-dialog__content){
    min-height: 118px;
    max-height: 293px;
    overflow-y: scroll;
  }
}
</style>